// 1、导入 React 第三方包
import React from 'react';
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));

// 条件渲染

// 1 条件：数据加载中和加载完毕
const isLoading = true;
// 2 条件（UI）
const loading = <div>加载中...</div>;
const finish = <div>数据加载完毕!</div>;

// 条件渲染函数
const func = () => {
  if (isLoading) {
    return loading;
  } else {
    return finish;
  }
};

// 3 页面渲染
const div = (
  <div>
    {/* 按条件渲染-三元表达式 */}
    {isLoading ? loading : finish}
    {/* 调用函数 */}
    {func()}
    {/* 逻辑 && 运算符 */}
    {isLoading && loading}
  </div>
);

root.render(div);
